<template>
  <div class="table">
    <div class="table_column">
      <div>{{ lang.transactions_time }}</div>
      <div>{{ lang.transactions_amount }}</div>
      <div>{{ lang.transactions_status }}</div>
    </div>
    <div class="table_content">
      <ul>
        <li v-for="(item, idx) in list" :key="idx">
          <div>{{ item.date }}</div>
          <div>{{ item.amount }}</div>
          <div class="statusClass yellow">
            <span>{{ lang.transactions_under_review }}</span>
          </div>
        </li>
      </ul>
      <Placeholder v-if="list.length === 0" />
    </div>
  </div>
  <div class="pagination" v-if="pageCount">
    <div class="paging">
      <div class="btn left" v-click-move @click="prev">
        <NuxtImg src="/images/layout/icon-jtLeft.png" />
      </div>
      <div class="txt">{{ page }} / {{ pageCount }}</div>
      <div class="btn right" v-click-move @click="next">
        <NuxtImg src="/images/layout/icon-jtLeft.png" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("setting");

// 列表数据
const page = ref(1);
const size = ref(10);
const total = ref(100);
const list = ref(
  new Array(size.value).fill({}).map(() => {
    return {
      date: "2025-08-18",
      amount: "R$ 2.000,00",
      type: "comissão",
      status: "review",
    };
  })
);

// 简单分页
const pageCount = computed(() => {
  return Math.ceil(total.value / size.value) || 0;
});
const prev = () => {
  if (page.value > 1) page.value -= 1;
};
const next = () => {
  if (page.value < pageCount.value) page.value += 1;
};
</script>

<style scoped lang="scss">
.table_column {
  display: flex;
  line-height: 1rem;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
  color: var(--theme-neutral1);
  height: 1rem;
  background: #3f2e4b;
}
.table_column div {
  width: 100%;
  text-align: center;
  font-size: 0.32rem;
}
.table_content {
  position: relative;
  min-height: 8rem;
  box-sizing: border-box;
  background: #312734;
  color: var(--theme-neutral1);
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}
ul {
  list-style: none;
  padding: 0.2rem 0 0.2rem 10px;
}
.table_content ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
  height: 1rem;
}
.table_content ul li div {
  text-align: center;
  width: 100%;
  font-size: 0.32rem;
}
.statusClass {
  display: flex;
  justify-content: flex-end;
  padding-right: 0.4rem;
}
.yellow span {
  background: linear-gradient(270deg, #e151a4 0%, #e66fc8 100%);
}
.statusClass span {
  display: inline-flex;
  width: 2.2rem;
  height: 0.7rem;
  border-radius: 0.2rem;
  align-items: center;
  justify-content: center;
}
.pagination {
  padding: 10px 0;
}
.paging {
  display: flex;
  justify-content: center;
  align-items: center;
}
.paging .btn {
  width: 0.8rem;
  height: 0.8rem;
  background: #312734;
  border-radius: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.paging .btn img,
.paging .btn :deep(img) {
  width: 0.5rem;
}
.paging .txt {
  padding: 0 0.32rem;
  color: var(--theme-neutral1);
  font-weight: 700;
  font-size: 0.32rem;
}
.paging .right :deep(img) {
  transform: rotate(180deg);
}
</style>
